<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title id="divTitle">新建角色</title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />

  <style type="text/css">
    *, body {
      margin: 0px;
      font-family: '微软雅黑';
    }
  </style>
  <script src="/js/jquery-1.10.2.min.js"></script>
  <script src="/js/jquery.form.js"></script>
  <script src="/js/generic.js"></script>
</head>

<body>

<!--<div th:replace="top :: top"></div>-->
<form id="filePost" method="post" enctype="multipart/form-data" th:onsubmit="|return false;|">
  <table class="maintable">
    <tr>
      <!--            <td th:replace="Menu :: Menu" class="rightmaintd" valign="top">-->
      <div style="width:920px;margin:10px auto;">
        <a href="/systemrole">&lt; 返回</a>
      </div>
      <table class="logintable" cellpadding="8" style="margin-top:20px;">
        <tr>
          <td width="100" hidden="false">角色ID</td>
          <td hidden="false"><input type="text" id="ID" class="logininput">id</td>
        </tr>
        <tr>
          <td width="100">角色名称</td>
          <td><input type="text" id="RoleName" class="logininput"></td>
        </tr>
        <tr>
          <td>描述</td>
          <td><input type="text" id="Description" class="logininput"></td>
        </tr>
        <tr>
          <td>备注</td>
          <td><input type="text" id="Remark" class="logininput"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="button" value="创&nbsp;&nbsp;建" class="denglubtn" id="Sbutton"> </td>
        </tr>
      </table>
      </td>
    </tr>
  </table>
</form>
<!--<div th:replace="bottom :: bottom"></div>-->

</body>
</html>
<script type="text/javascript">
  // 保存按钮点击事件处理函数
  var saveButton = document.getElementById('Sbutton');
  saveButton.addEventListener('click',() => {

    // 获取输入框中的数据
    var RoleNameValue = document.getElementById('RoleName').value;
    if(RoleNameValue==""){
      alert("请输入角色名称！");
      return;
    }
    var DescriptionValue = document.getElementById('Description').value;
    var RemarkValue = document.getElementById('Remark').value;

    // 创建要发送的数据对象
    var data = {

      roleName: RoleNameValue,
      description: DescriptionValue,
      remark: RemarkValue
    };
    // 发送 POST 请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/systemrole/', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求完成并成功处理后的回调函数
        console.log('数据已成功发送至后端');
        alert("创建成功！");
        window.location.href="/systemrole";
      }
    };
    xhr.send(JSON.stringify(data));
  });

</script>